<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			width:512px;
			height: 536px;
			border:1px solid red;
			background: url('./bg2.jpg') no-repeat 0px -1000px;
			position: relative;
		}
		#img{
			position: absolute;
			bottom: 100px;
			left:200px;
		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
	<div id="box">
		<img src="./me.png" alt="" id="img">
	</div>

	<script>
		let num = 0;
		setInterval(()=>{
			num++;
			if (num > 1000) {
				num = 0;
			}
			$('#box').css('background-position', '0px '+ (-1000+num) +'px');
		}, 1);

		$(window).keydown(function(e){
			let [left, top] = [parseInt($('#img').css('left')), parseInt($('#img').css('top'))];
			switch(event.keyCode) {
				case 38:
					//上					
					top -= 20;
					$('#img').css({'top': top + 'px'});
					break;
				case 40:
					//下
					top += 20;
					$('#img').css({'top': top + 'px'});
					break;
				case 37:
					//左
					left -= 20;
					$('#img').css({'left': left + 'px'});
					break;
				case 39:
					//右
					left += 20;
					$('#img').css({'left': left + 'px'});
					break;
			}
		});

	</script>
</body>
</html>